<template>
  <div class="module_">
    <div class="mb16">
       <back />
    </div>
    <div class="self_ziliao">
      <el-divider content-position="left" class="mb8"><h3>基本信息</h3></el-divider>
      <table class="table_ mb32">
        <tr>
          <td class="value_name">所属科室</td>
          <td class="fb value_val">{{info.department?info.department.name:''}}</td>
          <td class="value_name" >姓名</td>
          <td class="fb value_val">{{info.employee?info.employee.name:''}}</td>
          <td class="value_name">职工号</td>
          <td class="fb value_val">{{info.employee?info.employee.code:''}}</td>
        </tr>
        <tr>
          <td class="value_name">系统角色</td>
          <td class="fb value_val">{{info.role?info.role.name:''}}</td>
          <td class="value_name">性别</td>
          <td class="fb value_val">{{info.gander ? info.gander === 1 ? '男':'女':''}}</td>
          <td class="value_name">最高学历</td>
          <td class="fb value_val">{{echo(info.first_education,firstEducation)}}</td>
        </tr>
        <tr>
          <td class="value_name">专业职称</td>
          <td class="fb value_val">{{info.professional_rank_title}}</td>
          <td class="value_name">职称级别</td>
          <td class="fb value_val">{{echo(info.professional_rank_level,professionalRankLevel)}}</td>
          <td class="value_name"></td>
          <td></td>
        </tr>
      </table>

      <el-divider content-position="left" class="mb8"><h3>纵向项目</h3></el-divider>
      <myTable @info="portrait" style="width: 100%" class="mb32" :headerList='projectsList' :tableData='projects_tableData' :tableLoading='projects_tableLoading' />

      <el-divider content-position="left" class="mb8"><h3>横向项目</h3></el-divider>
      <myTable @info="transverse" style="width: 100%" class="mb32" :headerList='contractsList' :tableData='contracts_tableData' :tableLoading='contracts_tableLoading' />

      <el-divider content-position="left" class="mb8"><h3>国际合作</h3></el-divider>
      <myTable @info="international" style="width: 100%" :headerList='paperinfosList' :tableData='paperinfos_tableData' :tableLoading='paperinfos_tableLoading' />
    </div>

    <portraitInfo :info='infoObj' ref="portraitInfo" />
    <transverseInfo :info='infoObj' ref="transverseInfo" />
    <internationalInfo :info='infoObj' ref="internationalInfo" />
  </div>
</template>

<script>
import {ApiemployeesInfo,Apiprojects,Apicontracts,ApiInternationalcontracts} from '@/api'
import {firstEducation,professionalRankLevel} from '@/assets/js'
import {projectsList,contractsList,paperinfosList} from '../js/researchers_detail'
import myTable from '../components/table.vue'
import portraitInfo from "../../project/components/details.vue"
import transverseInfo from "../../project/components/htdetails.vue"
import internationalInfo from "../../project/components/gjdetails.vue"

export default {
  name:'researchers_detail',
  components:{
    myTable,
    portraitInfo,
    transverseInfo,
    internationalInfo,
  },
  data(){
    return{
      firstEducation,
      professionalRankLevel,
      id: this.$route.query.id,
      info: {
        department: {},
        employee: {}
      },
      projectsList,
      contractsList,
      paperinfosList,

      projects_tableData:[],
      projects_tableLoading: true,

      contracts_tableData:[],
      contracts_tableLoading: true,

      paperinfos_tableData:[],
      paperinfos_tableLoading: true,

      infoObj:{
        review:{}
      }
    }
  },
  mounted(){
    this.getInfo()
  },

  methods:{
    portrait(val){
      this.infoObj = val
      this.$refs.portraitInfo.showInfo = true
    },
    transverse(val){
      this.infoObj = val
      this.$refs.transverseInfo.showInfo = true
    },
    international(val){
      this.infoObj = val
      this.$refs.internationalInfo.showInfo = true
    },
    getInfo(){
      ApiemployeesInfo(this.id).then(({data})=>{
        this.info = data
        this.getProjects()
        this.getContracts()
        this.getPaperinfos()
      })
    },
    //纵向项目
    getProjects(){
      Apiprojects({employee_id:this.id}).then(({data})=>{
        this.projects_tableData = data
        this.projects_tableLoading = false
      })
    },
    //横向项目
    getContracts(){
      Apicontracts({employee_id:this.id}).then(({data})=>{
        this.contracts_tableData = data
        this.contracts_tableLoading = false
      })
    },
    // 国际合作
    getPaperinfos(){
      ApiInternationalcontracts({employee_id:this.id}).then(({data})=>{
        this.paperinfos_tableData = data,
        this.paperinfos_tableLoading = false
      })
    },
    echo(i,arr){
      let label
      for (const item of arr) {
        if(item.value === i){
          label = item.label
          break;
        }
      }
      return label
    },
  }
}
</script>
<style lang="less" scoped>
td{
  padding: 15px 8px;
}
.value_name{
  width: 200px;
  box-sizing: border-box;
}
.value_val{
  width: 200px;
}
.self_ziliao{
  padding-left: 8px;
}
</style>